<!-- 账号信息页面 -->
<template>
  <div class="myAccInfo">
    <h2 class="fz20">基本信息</h2>

    <div class="profile">
      <span>头像</span>
      <img src="../../../assets/imgs/1662018156074.jpg" alt="" />
    </div>
    <div class="pet-name">
      <span>昵称</span>
      <span>千图用户</span>
      <span class="amend">修改</span>
    </div>

    <div class="gender">
      <span>性别</span>
      <n-space>
        <n-radio
          :checked="checkedValue === '男'"
          value="男"
          name="basic-demo"
          @change="handleChange"
        >
          男
        </n-radio>
        <n-radio
          :checked="checkedValue === '女'"
          value="女"
          name="basic-demo"
          @change="handleChange"
        >
          女
        </n-radio>
        <n-radio
          :checked="checkedValue === '保密'"
          value="保密"
          name="basic-demo"
          @change="handleChange"
        >
          保密
        </n-radio>
      </n-space>
    </div>
  </div>
</template>

<script setup>
import { NInput, NSpace, NRadio, NUpload } from "naive-ui";
import { ref } from "vue";
useHead({ title: "账号信息" });

const checkedValueRef = ref(null);
const checkedValue = ref(checkedValueRef);

function handleChange(e) {
  checkedValueRef.value = e.target.value;
}
</script>
<style lang="scss" scoped>
.myAccInfo {
  padding: 10px;
  .fz20 {
    font-size: 20px;
    margin-bottom: 30px;
  }
  .profile {
    display: flex;
    align-items: center;
    span {
      margin-right: 80px;
    }
    img {
      width: 120px;
    }
  }

  .pet-name {
    width: 300px;
    height: 50px;
    line-height: 50px;
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
    .amend {
      color: #23bd8a;
      cursor: pointer;
    }
  }
  .gender {
    width: 300px;
    height: 50px;
    line-height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
